<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>盒子模型之border</title>
		<style>
			/*border:宽度 样式 颜色*/
			/*dashed：块状虚线
			 *  dotted：点状虚线
			 * solid：描边，实线
			 *  不写:什么也没有*/
			
			.box {
				width: 100px;
				height: 100px;
				margin: 10px 10px 10px 10px;
			}
			
			.box1 {
				border: 4px dashed red;
			}
			
			.box2 {
				border: 4px dotted red;
			}
			
			.box3 {
				border: 4px solid red;
			}
			
			.box4 {
				border-top: 4px dashed red;
				border-left: 4px dotted blue;
				border-right: 4px solid yellow;
				border-bottom: 4px solid green;
			}
		</style>
	</head>

	<body>
		<div class="box1 box"></div>
		<div class="box2 box"></div>
		<div class="box3 box"></div>
		<div class="box4 box"></div>
	</body>

</html>